<template>
  <div class="container">
    <el-card>
      <el-form ref="form" :model="roleObj" label-width="80px">
        <el-form-item style="width: 30%; float: left" label="关键字">
          <el-input
            placeholder="根据编号搜索"
            v-model="roleObj.keyword"
          ></el-input>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button @click="delte" size="small">清除</el-button>
          <el-button type="primary" size="small" @click="onSubmit"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 消息提示 -->
      <el-alert
        :closable="false"
        :title="'数据一共' + total + '条'"
        type="info"
        show-icon
      >
      </el-alert>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="编号" width="200px">
        </el-table-column>
        <el-table-column label="题型">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType === '1'">单选</span>
            <span v-else-if="scope.row.questionType === '2'">多选</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column label="题目编号" width="200px">
          <!-- 使用作用域插槽 -->
          <template slot-scope="scope">
            <div class="links">
              <!-- v-for遍历每一项 -->
              <a
                class="questionIDs-link"
                v-for="item in scope.row.questionIDs"
                :key="item.number"
                @click="handlerId(item.id)"
              >
                {{ item.number }}
              </a>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间" width="180">
        </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间">
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)">
        </el-table-column>
        <el-table-column prop="userName" label="录入人"> </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-row>
              <el-button
                @click="delBtn(scope.row, scope.$index)"
                type="danger"
                icon="el-icon-delete"
                circle
              ></el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block" style="float: right; padding: 10px 0">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="roleObj.page"
          layout=" prev, pager,next,sizes,jumper"
          :page-sizes="[20, 30, 50, 100]"
          :page-size="roleObj.pagesize"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 试题预览对话框 -->
    <el-dialog
      title="题目预览"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <!-- body部分 -->
      <el-row :data="solution">
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【题型】：
            <span v-if="solution.questionType === '1'">单选</span>
            <span v-else-if="solution.questionType === '2'">多选</span>
            <span v-else-if="solution.questionType === '3'">简答</span>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple-light">
            【编号】：{{ solution.id }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【难度】：
            <span v-if="solution.difficulty === '1'">简单</span>
            <span v-else-if="solution.difficulty === '2'">一般</span>
            <span v-else-if="solution.difficulty === '3'">困难</span>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple-light">
            【标签】：{{ solution.tags }}
          </div></el-col
        >
      </el-row>
      <el-row id="xiahua">
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【学科】：{{ solution.subjectName }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple-light">
            【目录】：{{ solution.directoryName }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【方向】：{{ solution.direction }}
          </div></el-col
        >
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="24"
          ><div class="grid-content bg-purple-dark">
            【题干】：
            <!-- 去掉html标签使用此方法 -->
            <div v-html="solution.question"></div>
            <!-- 单选框组 -->
            <template>
              <div v-if="flag">
                <div>单选题 选项：（以下选中的选项为正确答案）</div>
                <el-radio-group v-model="danxuan">
                  <el-radio :label="0">{{
                    this.radio.options[0].title
                  }}</el-radio
                  ><br />
                  <el-radio :label="1">{{
                    this.radio.options[1].title
                  }}</el-radio
                  ><br />
                  <el-radio :label="2">{{
                    this.radio.options[2].title
                  }}</el-radio
                  ><br />
                  <el-radio :label="3">{{
                    this.radio.options[3].title
                  }}</el-radio>
                </el-radio-group>
              </div>
            </template>
            <!-- 多选框组 -->
            <template>
              <div v-if="flagD">
                <div>多选题 选项：（以下选中的选项为正确答案）</div>
                <el-checkbox-group v-model="checkList">
                  <div
                    v-for="(item, index) in this.checkbox.options"
                    :key="index"
                  >
                    <el-checkbox :label="index">{{ item.title }}</el-checkbox>
                  </div>
                </el-checkbox-group>
              </div>
            </template>
          </div></el-col
        >
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="24"
          ><div class="grid-content bg-purple-dark">
            【参考答案】：
            <el-button type="danger" size='small' @click="play">视频答案预览</el-button>
            <div id="shipin" v-if="showVideo">
              <video width="300" controls autoplay>
                <source :src="solution.videoURL" type="video/mp4" />
              </video>
            </div></div
        ></el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="24"
          ><div class="grid-content bg-purple-dark">
            【答案解析】：
            <span v-html="solution.answer"></span></div
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="24"
          ><div class="grid-content bg-purple-dark" id="quxiao">
            【题目备注】：{{ solution.remarks }}
          </div></el-col
        >
      </el-row>
      <!-- footer部分 -->
      <span slot="footer">
        <el-button type="primary" @click="dialogVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'

export default {
  name: 'QuestionsRandoms',
  data () {
    return {
      // id: 0,
      tableData: [],
      roleObj: {
        page: 1, // 单前页数
        pagesize: 10, // 页尺寸
        keyword: '' // 关键字
      },
      total: 5,
      dialogVisible: false,
      // questionsForm: null
      solution: {
        questionType: '',
        id: null,
        difficulty: '',
        tags: '',
        subjectName: '',
        catalogID: '',
        direction: '',
        videoURL: '',
        answerID: '',
        remarks: ''
      }, // 问题详情数据
      showVideo: false, // 控制播放按钮
      flag: false,
      radio: {
        options: []
      }, // 单选
      danxuan: null,
      flagD: false,
      checkbox: {
        options: []
      },
      checkList: [] // 多选
    }
  },
  created () {
    this.randoms()
  },
  methods: {
    async randoms () {
      this.roleObj.keyword = this.roleObj.keyword.trim()
      const { data: res } = await randoms(this.roleObj)
      console.log(res, '33')
      this.tableData = res.items
      this.total = res.counts
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.roleObj.pagesize = val
      this.randoms()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      // this.roleObj.pagesize = 20
      this.roleObj.page = val
      this.randoms()
    },
    delBtn (id) {
      // console.log(id)
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await removeRandoms(id)
          // console.log(res)
          this.randoms()
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 搜索按钮
    onSubmit () {
      // 赋值1？
      this.roleObj.page = 1
      this.randoms()
    },
    // 清除按钮
    delte () {
      this.roleObj.keyword = ''
    },
    play () {
      this.showVideo = true
    },
    // 试题预览
    async handlerId (id) {
      // console.log(id)
      this.dialogVisible = true
      const { data: res } = await detail({ id })
      // console.log(res)
      this.solution = res
      if (res.questionType === '1') {
        this.flag = true
        this.flagD = false
        this.radio.options = res.options
        res.options.forEach((ele, index) => {
          if (ele.isRight === 1) {
            // console.log(ele, index)
            this.danxuan = index
          }
        })
      } else if (res.questionType === '2') {
        this.flagD = true
        this.flag = false
        this.checkbox.options = res.options
        res.options.forEach((ele, index) => {
          if (ele.isRight === 1) {
            this.checkList.push(index)
          }
        })
      } else {
        this.flag = false
        this.flagD = false
      }
    },
    handleClose (done) {
      this.dialogVisible = false
      this.showVideo = false
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 0 10px;
  margin: 10px 0;
  .links {
    display: flex;
    flex-direction: column;
    .questionIDs-link {
      color: steelblue;
      text-decoration: underline;
    }
  }
}
.questionstyle {
  display: flex;
  float: left;
  width: 24%;
  padding: 8px 0;
}
.box {
  overflow: hidden;
}
.grid-content {
  min-height: 36px;
}
</style>
